<template>
  <div class="home">
    <my-header></my-header>
    <nav>
      <my-nav></my-nav>
    </nav>
    <div class="content">
      <transition name="move" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
  import header from './header.vue';
  import nav from './nav.vue'

  export default {
    name: 'app',
    data: function () {
      return {}
    },
    components: {
      'my-header': header,
      'my-nav': nav
    }

  }
</script>
<style>

  nav {
    width: 15%;
    background-color: #2e363f;
    float: left;
  }
  .content{
    float: left;
    width: 83%;
    margin-left: 2%;
    margin-top: 40px;
  }
</style>

